<template>
  <div class="compile">
    <!-- 顶部 -->
    <van-nav-bar title="我的资料" left-arrow>
      <template #left>
        <i class="iconfont  icon-zuojiantou" @click="$router.push('/mine')"></i
      ></template>
    </van-nav-bar>
    <!-- 头像 -->
    <van-cell-group inset class="compile_head" @click="$router.push('/amend')">
      <van-cell title="头像" is-link>
        <img :src="`http://localhost:1337${Userlist.avatar}`" alt="" />
      </van-cell>
    </van-cell-group>
    <!-- 信息 -->
    <van-cell-group inset class="compile_message">
      <van-cell
        title="昵称"
        :value="Userlist.nickname"
        is-link
        @click="nameShow"
      />
      <van-cell title="性别" :value="genDer" is-link @click="gendershow" />
      <van-cell
        title="地区"
        :value="areaList.city_list[this.Userlist.area]"
        is-link
        @click="myregionshow"
      />
      <van-cell
        title="个人简介"
        :value="Userlist.intro"
        is-link
        @click="introshow"
      />
    </van-cell-group>
    <!-- 退出 -->
    <van-cell-group inset class="compile_quit" @click="quit">
      <van-cell>
        <h3>退出登录</h3>
      </van-cell>
    </van-cell-group>
    <!-- 性别 -->
    <van-popup v-model="showgender" position="bottom" :style="{ height: '45%' }"
      ><van-picker
        :default-index="0"
        show-toolbar
        :columns="areaLists"
        @confirm="onConfirm"
        @cancel="onCancel"
    /></van-popup>

    <!-- 昵称弹出窗 -->
    <van-dialog
      v-model="nameshow"
      title="昵称"
      show-cancel-button
      autofocus
      @confirm="updateNickname"
    >
      <van-field v-model="niName" placeholder="请输入您的昵称" />
    </van-dialog>

    <!-- 个人简介 -->
    <van-dialog
      v-model="introduceshow"
      title="个人简介"
      show-cancel-button
      autofocus
      @confirm="updateintroduce"
    >
      <van-search
        v-model="niintro"
        placeholder="请输入您的个人简介"
        left-icon="records"
      />
    </van-dialog>
    <!-- 地区 -->
    <van-popup
      v-model="regionshow"
      position="bottom"
      :style="{ height: '45%' }"
    >
      <van-area
        :area-list="areaList"
        :value="myarea"
        :columns-num="2"
        @confirm="uptearea"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import { setUserinfo, getUserinfo } from '@/api/mine.js'
import { removeToken } from '@/utils/token.js'
import { mapState } from 'vuex'
export default {
  name: 'compile',
  data () {
    return {
      showgender: false, //性别显示
      areaLists: ['未知', '男', '女'], //性别
      forbidClick: false,
      nameshow: false, //昵称开关
      niName: '', // 昵称
      introduceshow: false, //简介开关
      niintro: '', //简介
      areaList: areaList, //地区包
      myarea: '', //选择的地区
      regionshow: false, //地区显示
      areach: '' // 地区
    }
  },
  methods: {
    // 修改地区
    async uptearea (value) {
      console.log(value)
      this.myarea = value[1].code
      await setUserinfo({ area: this.myarea })
      this.$store.commit('setUserlist', {
        ...this.Userlist,
        area: this.myarea
      })
      this.areach = value[1].name
      this.$toast({
        message: '更新成功',
        forbidClick: true,
        duration: 500
      })
      this.regionshow = false
    },
    // 打开地区
    myregionshow () {
      this.regionshow = true
      this.myarea = this.Userlist.area
    },
    // 退出登录
    quit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '你确定要退出登录吗？'
        })
        .then(() => {
          // on confirm
          removeToken()
          this.$router.push('/login')
        })
    },
    // 简介保存
    async updateintroduce () {
      await setUserinfo({ intro: this.niintro })
      this.$store.commit('setUserlist', {
        ...this.Userlist,
        intro: this.niintro
      })
      this.$toast({
        message: '更新成功',
        forbidClick: true,
        duration: 500
      })
    },
    // 简介弹出
    introshow () {
      this.introduceshow = true
      this.niintro = this.Userlist.intro
    },
    // 昵称保存
    async updateNickname () {
      await setUserinfo({ nickname: this.niName })
      this.$store.commit('setUserlist', {
        ...this.Userlist,
        nickname: this.niName
      })
      this.$toast({
        message: '更新成功',
        forbidClick: true,
        duration: 500
      })
    },
    // 昵称弹出
    nameShow () {
      this.nameshow = true
      this.niName = this.Userlist.nickname
    },
    gendershow () {
      this.showgender = true
    },
    // 修改性别
    //取消按钮
    onCancel () {
      this.showgender = false
      this.getUser()
    },
    // 确定按钮
    async onConfirm (value, index) {
      // console.log(index)
      const gender = index
      await setUserinfo({ gender: gender })
      // console.log(res)
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 500
      })
      this.showgender = false
      this.getUser()
    },
    async getUser () {
      // console.log(this.Userlist)
      const res = await getUserinfo()
      // this.Userlist = res.data.data
      this.$store.commit('setUserlist', res.data.data)

      // this.Userinfo()
    }
  },
  // watch: {
  //   genDer: function () {}
  // },
  computed: {
    ...mapState(['Userlist']),
    genDer: function (value) {
      if (this.Userlist.gender == 0) {
        value = '未知'
      } else if (this.Userlist.gender == 1) {
        value = '男'
      } else {
        value = '女'
      }
      return value
    }
  },
  created () {
    this.getUser()
    // this.uptearea()
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f7f4f5;
}
.compile {
  // 顶部
  .van-nav-bar__title {
    font-weight: 700;
    font-size: 18.8px;
  }
  i.iconfont.icon-zuojiantou {
    margin-left: -8px;
    font-size: 24px;
  }
  // 头像
  .compile_head {
    margin-top: 18px;
    height: 62px;
    .van-cell {
      display: flex;
      align-items: center;
      img {
        margin-top: 5px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
    }
  }
  // 信息
  .compile_message {
    margin-top: 10px;
    margin-bottom: 13px;
  }
  // 退出
  .compile_quit {
    height: 50px;
    h3 {
      margin-top: 3px;
      color: #e90d27;
      font-size: 16px;
      text-align: center;
      font-weight: 400;
    }
  }
}
</style>
